<template>
    <el-card class="container">
        <template #header>
            <el-row>
                <el-col :span="2" class="label">
                    <span>类型:</span>
                </el-col>
                <el-col :span="7">
                    <el-input v-model.trim="priceTypeName" placeholder="Please input leveltype" />
                </el-col>
                <el-col :span="3" class="query">
                    <el-button
                        type="primary"
                        size="small"
                        icon="el-icon-search"
                        @click="query">
                        查询
                    </el-button>
                </el-col>
            </el-row>
        </template>
         <div>
            <el-button
                type="primary"
                size="small"
                icon="el-icon-plus"
                @click="addLevelTypeEvent">
                增加
            </el-button>
            <el-popconfirm
                v-if="multipleSelection.length > 0"
                title="确定删除吗？"
                @confirm="deleteLevelType"
            >
                <template #reference>
                    <el-button
                        type="danger"
                        size="small"
                        icon="el-icon-delete">
                        删除
                    </el-button>
                </template>
            </el-popconfirm>
            <el-button
                v-else
                type="danger"
                size="small"
                icon="el-icon-delete"
                @click="deleteLevelType"
                >
                删除
            </el-button>
        </div>
        <el-table
            v-loading="loading"
            ref="multipleTable"
            :data="levelTypes"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="selectionChange"
        >
            <el-table-column
                type="selection"
                width="55"
            >
            </el-table-column>
            <el-table-column
                label="操作"
                width="60"
            >
                <template #default="scope">
                    <el-button type="text" size="small" @click="editLevelType(scope.row)"
                    >修改</el-button>
                </template>
            </el-table-column>
            <el-table-column
                prop="id"
                label="Id"
                width="60"
            >
            </el-table-column>
            <el-table-column
                prop="description"
                label="车辆类型"
            >
            </el-table-column>
            <el-table-column
                prop="isActive"
                label="是否激活"
                width="80"
            >
                <template #default="scope">
                    <span>{{scope.row.isActive ? 'Yes' : 'No'}}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="editDate"
                label="最后编辑时间"
            >
            </el-table-column>
            <el-table-column
                prop="editUserId"
                label="最后编辑用户"
            >
            </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="pageChange"
        >
        </el-pagination>
    </el-card>
    <AddDialog ref="addDialogRef" :save="save"></AddDialog>
</template>

<script>
import { ref, toRefs, reactive, defineComponent } from 'vue';
import AddDialog from '../components/AddDialog.vue';
import { alert, url } from '../utils/index';
import dayjs from 'dayjs';
import useDate from '../utils/dayjs';
import { ApiClient } from '../utils/apiClient';

export default defineComponent({
    name: 'LevelType',
    components: {
        AddDialog
    },
    setup() {
        const multipleTable = ref(null);
        const addDialogRef = ref(null);
        const apiClient = new ApiClient();

        const state = reactive({
            loading: false,
            priceTypeName: '',
            levelTypes: [],
            multipleSelection: [],
            total: 0,
            currentPage: 1,
            pageSize: 10,
            type: 'add'
        });

        const query = () => {
            state.currentPage = 1;
            getLevelType();
        }

        const getLevelType = () => {
            state.loading = true;

            const request = {
                Keyword: state.priceTypeName,
                PageSize: 10,
                PageIndex: state.currentPage
            }
            apiClient.get(url.levelType, null, request).then(res => {
                if (!res) {
                    state.loading = false;
                    return;
                }

                try {
                    const { levelTypeList, totalCount } = res;

                    levelTypeList.forEach(e => {
                        const { date, formateDate } = useDate(e.editDate);
                        formateDate();

                        e.editDate = date;
                    });

                    state.levelTypes = levelTypeList || [];
                    state.total = totalCount;
                } catch (error) {
                    throw error;
                } finally {
                    state.loading = false;
                }
            })
        }

        const save = (value) => {
            if (state.type == 'add') {
                const request = {
                    description: value.description,
                    isActive: value.isActive,
                    editDate: new Date(dayjs().format('YYYY-MM-DD HH:mm:ss')),
                    editUserId: 1 //需要返回userID
                }

                apiClient.post(url.levelType, request).then(res => {
                    alert.success('添加成功');
                    addDialogRef.value.close();

                    query();
                })
            } else {
                const request = {
                    id: value.id,
                    description: value.description,
                    isActive: value.isActive,
                    editUserId: 1
                }

                apiClient.put(url.levelType, request).then(res => {
                    alert.success('修改成功');
                    addDialogRef.value.close();

                    query();
                })
            }
        }

        const addLevelTypeEvent = () => {
            state.type = 'add';
            addDialogRef.value.open();
        }

        const editLevelType = (dataItem) => {
            state.type = 'edit';
            addDialogRef.value.edit(dataItem);
        }

        const selectionChange = (val) => {
            state.multipleSelection = (val || []).map(e => e.id);
        }

        const deleteLevelType = () => {
            if (!state.multipleSelection || state.multipleSelection.length == 0) {
                alert.warn('请至少选择一项');
                return;
            }
            const apis = [];
            for (const id of state.multipleSelection) {
                apis.push(apiClient.delete(url.levelType, null, null, { id }));
            }

            Promise.all(apis).then(res => {
                alert.success('删除成功');
                getLevelType();
            })
        }

        const pageChange = (val) => {
            state.currentPage = val;
            getLevelType();
        }

        return {
            ...toRefs(state),
            addDialogRef,
            multipleTable,
            selectionChange,
            addLevelTypeEvent,
            editLevelType,
            deleteLevelType,
            getLevelType,
            pageChange,
            query,
            save
        }
    }
})
</script>

<style scoped>
    .container {
        min-height: 100%;
    }

    .el-card .is-always-shadow {
        min-height: 100% !important;
    }
</style>